<template>
	<view>
		<view class="address-wrapper" @click="getAddr">
			<view class="address" v-if="addr.userName">
				<view class="receiver">
					<view class="name">收货人：{{addr.userName}}</view>
					<view class="phone-num">{{addr.telName}}</view>
					<text class="iconfont icon-arrow-right"></text>
				</view>
				<view class="address-txt">收货地址：{{addr.provinceName+' '+addr.cityName+' '+addr.countyName+' '+addr.detailInfo}}</view>
			</view>
			<!-- 选择地址 -->
			<view class="choose-address" v-else>
				<view>请选择地址</view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
			<view class="flower">
				<image src="/static/images/cart_border@2x.png"></image>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item,index) in goodsList" :key='index' @click="toItem(item.goodsId)">
				<image :src="item.goods_small_logo" alt=""></image>
				<view class="right">
					<view class="text-line2">{{item.goods_name}}</view>
					<view class="btm">
						<text class="price">￥<text>{{item.goods_price}}</text>.00</text>
						<view class="goods-num">
							<text>{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-fixed" @click="wxPay">
			微信支付({{totalPrice}}.00元)
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 通讯地址存入本地
				addr: uni.getStorageSync('addr') || {},
				// 商品列表
				goodsList: []
			}
		},
		onLoad(options) {
			// // // 取storage cart里面每一项goodsId以,分隔
			// this.cartData = uni.getStorageSync('cartData') || [];
			// // 返回cart数组勾选的商品
			// this.cartData = this.cartData.filter(item => {
			// 	return item.checked;
			// });
			
			// 如果goodsId有值,表示立即购买，优先级比购物车跳转更高
					this.goodsId = parseInt(options.goodsId);
			
					if (this.goodsId) {
						// 构造一个和storage cart一样的结构
						this.cartData = [
							{
								goodsId: this.goodsId,
								num: 1,
								checked: true
							}
						];
					} else {
						// 取storage cart里面每一项goodsId以,分隔
						this.cartData = uni.getStorageSync('cartData') || [];
						// 返回cart数组勾选的商品
						this.cartData = this.cartData.filter(item => {
							return item.checked;
						});
					}
			// 如果storage cart不为空的,才发请求
			if (this.cartData.length) {
				this.getGoodsList();
			}
		},
		computed: {
			// 总价
			totalPrice() {
				// 选中商品数量*商品价格之和
				return this.goodsList.reduce((sum, item) => {
					return sum + item.num * item.goods_price
				}, 0)
			}
		},
		methods: {
			// 1、授权 获取通讯地址
			getAddr() {
				// 发起授权
				uni.authorize({
					scope: 'scope.address',
					success: () => {
						// 掉接口
						uni.chooseAddress({
							success: (res) => {
								console.log(res)
								this.addr = res
							}
						})
					},
					// 点击授权取消
					fail: () => {
						//提示打开
						uni.showModal({
							title: '提示',
							content: '需要在设置中允许通讯地址',
							success: res => {
								if (res.confirm) {
									uni.openSetting({

									})
								}
							}
						})
					}
				})
			},
			// 2、请求商品列表
			async getGoodsList() {
				// goodsId数组,然后join拼接字符串
				let idArr = this.cartData.map(item => {
					return item.goodsId;
				});

				// 数组元素以逗号分隔
				let idStr = idArr.join(',');

				let _goodsList = await this.$request({
					url: '/api/public/v1/goods/goodslist?goods_ids=' + idStr
				});

				// 在请求结束后，两个数组合并
				this.goodsList = this.cartData.map(item => {
					//在goodsList找一项goodsId为item.goodsId
					let targetGoods = _goodsList.find(goods => {
						return goods.goods_id === item.goodsId;
					});

					return { ...item,...targetGoods
					};
				});
			},
			// 点击微信支付后跳转页面
			wxPay() {
				// 判断商品数量
				// 如果没有token,跳转登录
				// this.token = uni.getStorageSync('token')
				// console.log(this.token)
				// if (!this.token) {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
					// 如果没有return的话,跳转后下边的逻辑继续执行
				// 	return
				// }
				// 打开创建订单
				console.log('qqq')
				this.createOrder()
			},
			
			async createOrder() {
				// 获取订单参数/
				let data = await this.$request({
					url: '/api/public/v1/my/orders/create',
					method: 'post',
					// header: {
					// 	Authorization: this.token
					// },
					isAuth:true,
					data: {
						order_price: this.totalPrice,
						consignee_addr: this.getConsigneeAddr(),
						goods: this.getFilterGoodsList()
					}
				})
				// console.log(data)
				!this.goodsId && this.arrangeCart()
				this.orderNo = data.order_number
				this.doPay()
			},
			arrangeCart() {
						// 取storage
						let cartData = uni.getStorageSync('cartData') || [];
						// 更新
						// 把storage cart勾选的商品去掉
						cartData = cartData.filter(item => {
							return !item.checked;
						});
						// 存
						uni.setStorageSync('cartData', cartData);
					},
			// 获取支付参数并唤起微信支付
			async doPay() {
				let data = await this.$request({
					url: '/api/public/v1/my/orders/req_unifiedorder',
					method: 'post',
					isAuth:true,
					header: {
						Authorization: this.token
					},
					data: {
						order_number: this.orderNo
					}
				})
				console.log(data)
				// 唤起微信支付
				uni.requestPayment({
					...data.pay,
					success: (res) => {
						uni.showToast({
							title: '支付成功'
						});
						uni.navigateTo({
							url:'/pages/order_result/order_result'
						})
					},
					fail: (res) => {
						uni.showToast({
							title: '支付失败'
						});
						uni.navigateTo({
							url:'/pages/order_result/order_result?orderNumber ='+this.orderNo 
						})
					}
				})
			},
			getFilterGoodsList() {
				return this.goodsList.map(item => {
					return {
						goods_id: item.goods_id,
						goods_number: item.num,
						goods_price: item.goods_price
					}
				})
			},
			getConsigneeAddr() {
				let {
					provinceName,
					cityName,
					countyName,
					detailInfo,
					userName,
					telNumber
				} = this.addr;
				return `${provinceName}${cityName}${countyName}${detailInfo} ${userName} ${telNumber}`
			},
		}
	}
</script>
<style lang="less">
	.address-wrapper {
		background-color: #fff;
	}
	
	.address {
		display: flex;
		flex-direction: column;
		padding: 44rpx 30rpx 48rpx 20rpx;
		.receiver {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;
			position: relative;
			.phone-num {
				margin-right: 40rpx;
			}
			.icon-arrow-right {
				position: absolute;
				top: 8rpx;
				right: 0;
				color: #999;
			}
		}
	}
	
	.choose-address {
		display: flex;
		padding: 44rpx 30rpx 48rpx 20rpx;
		justify-content: space-between;
		.icon-arrow-right {
			color: #999;
		}
	}
	
	.flower {
		image {
			height: 16rpx;
			width: 100%;
			display: block;
		}
	}
	
	.goods-item {
		height: 206rpx;
		background-color: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		image {
			width: 160rpx;
			height: 160rpx;
			margin-left: 30rpx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 20rpx 0 18rpx;
			.btm {
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;
				.price {
					color: #eb4450;
					> text {
						font-size: 24px;
					}
				}
				.goods-num {
					display: flex;
					align-items: center;
					button {
						width: 60rpx;
						height: 50rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 4rpx solid #666;
					}
					text {
						margin: 0 30rpx;
					}
				}
			}
		}
	}
	.goods-list {
		position: absolute;
		bottom: 98rpx;
		top: 243rpx;
		width: 100%;
		overflow: auto;
		padding-bottom: 60rpx;
		background-color: #f4f4f4;
	}
	
	.bottom-fixed {
		position: absolute;
		height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #1aad19;
		color: #fff;
		line-height: 98rpx;
		text-align: center;
	}
</style>
